<template>
  <div>
    <h3>仿真实验</h3>
    <!-- <div class="weui-cells__title">带跳转的列表项</div> -->
    <div class="weui-cells">
      <div v-for="(item, index) in list" :key="index" class="weui-cell weui-cell_access" @click="toPage(index)">
        <span class="weui-cell__bd">
          <span>{{item.title}}</span>
        </span>
        <span class="weui-cell__ft">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [
        {
          title: '实验一',
          name: '一阶系统的单位脉冲响应',
          path: 'one'
        },
        {
          title: '实验二',
          name: '一阶系统的单位阶跃响应',
          path: 'two'
        },
        {
          title: '实验三',
          name: '二阶系统的单位脉冲响应',
          path: 'three'
        },
        {
          title: '实验四',
          name: '二阶系统的单位阶跃响应',
          path: 'four'
        },
        {
          title: '实验五',
          name: 'Nyquist图',
          path: 'five'
        },
        {
          title: '实验六',
          name: 'Bode图',
          path: 'six'
        },
        {
          title: '实验七',
          name: '超前校正',
          path: 'seven'
        },
        {
          title: '实验八',
          name: '滞后校正',
          path: 'eight'
        },
        {
          title: '实验九',
          name: '滞后－超前校正',
          path: 'nine'
        },
        {
          title: '实验十',
          name: 'PID校正',
          path: 'ten'
        }
      ]
    }
  },
  methods: {
    toPage(index) {
      this.$router.push({
        path: this.list[index].path
      })
    }
  }
};
</script>

<style scoped>
h3{
  text-align: center;
  margin: 5vw 0;
  color: #333;
  font-size: 0.55rem;
}
</style>
